<template>
  <div class="btn-container">
    <div class="icon">
      <img :src="props.platformInfo.iconSrc" style="width: 100%; height: 100%" />
    </div>
    <div class="text">
      <div class="status">{{ platformInfo.state }}</div>
      <div class="platform">{{ platformInfo.platform }}</div>
    </div>
  </div>
</template>

<script setup lang="ts">
const props = defineProps({
  platformInfo: {
    type: Object,
    default: () => ({
      iconSrc: '/login/QQ.png',
      state: '未登录',
      platform: '未知',
    }),
  },
});
</script>

<style lang="scss" scoped>
.btn-container {
  display: flex;
  align-items: center;
  width: 456px;
  height: 125px;
  margin: 10px 0;
  padding-left: 50px;
  background-color: rgb(245, 245, 247);
  border-radius: 10px;
  transition: width 0.3s ease;

  .icon {
    width: 50px;
    height: 50px;
    margin-right: 40px;
  }
  .text {
    .status {
      font-size: 20px;
      color: rgb(0, 0, 0);
      margin-bottom: 3px;
    }
    .platform {
      font-size: 12px;
      color: rgb(122, 122, 123);
    }
  }

  &:hover {
    width: 560px;
    background-color: #f0f7ff;

    .status {
      color: #017afe;
    }
  }
}
</style>
